import {App} from 'vue'

import { permission } from '../directives/permission'
import { test } from '../directives/test'
import { focus } from '../directives/focus'
import { formatTime } from '../directives/format-time'
import { copy } from '../directives/copy'
import { isLeaf } from '../directives/isLeaf'
 
/**
 * 注册全局自定义指令
 *
 *  created：       在绑定元素的 attribute 或事件监听器被应用之前调用；
 *  beforeMount：   当指令第一次绑定到元素并且在挂载父组件之前调用；
 *  mounted：       在绑定元素的父组件被挂载后调用；
 *  beforeUpdate：  在更新包含组件的 VNode 之前调用；
 *  updated：       在包含组件的 VNode 及其子组件的 VNode 更新后调用；
 *  beforeUnmount： 在卸载绑定元素的父组件之前调用；
 *  unmounted：     当指令与元素解除绑定且父组件已卸载时，只调用一次；
 * 
 *  created - 元素创建后，但是属性和事件还没有生效时调用。
 *  beforeMount- 仅调用一次，当指令第一次绑定元素的时候。
 *  mounted- 元素被插入父元素时调用.
 *  beforeUpdate: 在元素自己更新之前调用
 *  updated - 元素或者子元素更新之后调用.
 *  beforeUnmount: 元素卸载前调用.
 *  unmounted -当指令卸载后调用，仅调用一次
 * 
 * 
    // 全局自定义指令写法
    let app = createApp(App)
    app.directive('highlight', {
      beforeMount(el, binding, vnode) {
        el.style.background = binding.value
      }
    })
    v-highlight = '#000'
    
    // 局部自定义指令写法
    directives: {
      highlight: {
        beforeMount(el, binding, vnode) {
          el.style.background = binding.value;
        },
      },
 * **/

export function setupDirectives(app: App){
  app.directive('permission', permission)
  app.directive('test', test)
  app.directive('focue', focus)
  app.directive('format-time', formatTime)
  app.directive('copy', copy)
  app.directive('isLeaf', isLeaf)
}